<template>
  <view class="page">
      <view class="cbg"></view>
      <u-navbar  :title="pubTitle" :background="{background:barStyle.background}" :back-icon-color="barStyle.fontColor" :title-color="barStyle.fontColor"
                 :border-bottom="false"></u-navbar>

      <view class="top-calendar">
        <text>西部食谷{{ parkNum }}区</text>
        <view>{{ dateTxt }}</view>
      </view>

      <view class="top-op">
        <view class="top-op-item" @click="showDate=true">
          <u-icon name="clock" size="32" color="#fff" class="ca-down"></u-icon>
          <text>查看历史记录</text>
        </view>
        <view class="top-op-item" @click="changeCord">
          <u-icon name="arrow-rightward" size="30" color="#fff" class="ca-down"></u-icon>
          <text>{{ useType === 'point' ? '查看历史记录':'查看点位记录' }}</text>
        </view>
      </view>
    <block v-if="useType==='point'">
      <view class="ponit-scbox">
        <view class="ponit-t">{{ parkNum }}{{recordType==='巡逻'?'区打卡点位':'区保洁点位'}}</view>
        <scroll-view class="ponit-c" scroll-y="true">
          <view class="ponit-c-b">
            <view class="ponit-col" @click="pointClick(index)" :class="index===acPoint?'ponit-col-ac':''"
                  v-for="(item,index) in pointList" :key="index">
              <text class="qrnum">{{index}}</text>
              <!--<image class="point-ic" :src="stateIcon(item.state)"></image>-->
              <text class="qrnum">次数:{{ item.count }}</text>
              <text class="time" v-if="item.inspectTime=='1653062400000'">{{ parkNum }}{{recordType==='巡逻'?'未打卡':'未检查'}}</text>
              <text class="time" v-else>{{ item.inspectTime.split(" ")[1]}}</text>
              <view class="errcount" v-if="item.errorCount!==0">{{ item.errorCount }}</view>
							<!--<view class="count" v-if="item.count!==0">{{ item.count }}</view>-->
            </view>
          </view>
        </scroll-view>
      </view>

      <view class="hist-hisbox">
        <view style="background: #FFFFFF;padding: 48rpx 32rpx" v-if="clockList&&clockList.length>0">
          <view class="hist-hisitem" v-for="(item,index) in clockList" :key="index">
            <view class="hist-hiscol">
              <view class="hist-hiscol-l">
                <div class="hist-hiscircle"></div>
              </view>
              <view class="hist-hiscol-r">
                <view class=hist-histime>{{ item.time }}</view>
                <view class="hist-hisc" @click="`/pageSecurity/patrol/clockInfo?formData=${item.formData}&remark=${item.remark}`"
                      :style="{color: item.state=='异常'?'#F74D39':'',background:item.state=='异常'?'rgba(247,77,57,0.09)':''}">
                  <view>
                    <u-icon name="map-fill" :color="item.state=='异常'?'#F74D39':'#B0B0B0'" size="28"></u-icon>
                    {{ item.qrCode }}
                  </view>
                  <view>
                    {{ item.inspectionPerson }}
                  </view>
                  <view>
                    {{ item.state }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>

    <block v-if="useType==='history'">
      <view class="xg-count">
        <view class=""  @click="changeRecoSHow(0)">
          <text>{{ allCount }}</text>
          <text>{{recordType==='巡逻'?'今日累计打卡':'今日累计检查'}}</text>
        </view>
        <view class="" @click="changeRecoSHow(1)">
          <text style="color: #F74D39;">{{ errCount }}</text>
          <text>{{recordType==='巡逻'?'异常点位':'不合格点位'}} </text>
        </view>
      </view>

      <view class="hist-box">
        <view style="background: #FFFFFF;padding: 48rpx 32rpx" v-if="clockList&&clockList.length>0">
          <view class="hist-item" v-for="(item,index) in clockList" :key="index">
            <view class="hist-col">
              <view class="hist-col-l">
                <div class="hist-circle"></div>
              </view>
              <view class="hist-col-r">
                <view class=hist-histime>{{ item.time }}</view>
                <view class="hist-c" @click="navTo(`/pageSecurity/patrol/clockInfo?formData=${item.formData}&remark=${item.remark}`)"  :style="{color: item.state=='异常'?'#F74D39':'',background:item.state=='异常'?'rgba(247,77,57,0.09)':''}">
                 <view class="hist-c-t">
                   <view>
                     <u-icon name="map-fill" :color="item.state=='异常'?'#F74D39':'#B0B0B0'" size="28"></u-icon>
                     {{ item.qrCode }}
                   </view>
                   <view>
                     {{ item.locationName }}
                   </view>
                 </view>

                  <view class="hist-c-b">
                    <view>
                      {{item.inspectionPerson}}
                    </view>
                    <view>
                      {{ item.state }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>

    <u-calendar v-model="showDate" mode="date" @change="calendarFn"></u-calendar>
  </view>
</template>

<script>
import ComTopBar from "../../components/ComTopBar/ComTopBar";

export default {
  components: {ComTopBar},
  data() {
    return {
      parkNum: 'A',
      pubTitle:`A区巡更点位记录`,
      showDate: false,
      inspectionPerson: '',
      clockList: null,
      dateTxt: this.$u.timeFormat(Date.now(), 'yyyy年mm月dd日'),
      formDate: this.$u.timeFormat(Date.now()),
      pointList: [],
      headStyle: {
        marginBottom: '2rpx',
        borderRadius: '12rpx',
        background: '#fff',
        padding: '26rpx 32rpx',
        fontSize: '28rpx',
        color: '#333333'
      },
      bodyStyle: {
        background: '#FFFFFF',
        padding: '48rpx 32rpx'
      },
      acPoint: 0,
      useType:'point',
      recordType:'巡逻',
      allCount:0,
      errCount:0,
      scrollTop:0,
      barStyle:{
        background:'',
        fontColor:'#fff'
      },
      state:''
    };
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
    if(e.scrollTop>0){
      this.barStyle.background='#fff'
      this.barStyle.fontColor="#333"
    }else{
      this.barStyle.background=''
      this.barStyle.fontColor='#fff'
    }
  },
  onLoad({type,useType,recordType}) {
    this.parkNum=type
    this.useType=useType
    this.recordType=recordType
    this.setPubTitle()
    this.getData()

  },
  methods: {
    cuBack(){
      this.navTo('/pages/comChilds/comChilds')
    },
    stateIcon(val){
      switch (val){
        case '正常':
          return "/static/img/clock/sticon(1).png"
        case '异常':
          return "/static/img/clock/sticon(3).png"
        case '超时':
          return "/static/img/clock/sticon(2).png"
        default:
          console.log("正常",val)
      }
    },
    changeCord(){
      this.useType==='point'?this.useType='history':this.useType='point'
      this.setPubTitle()
      this.getData()
    },
    getData(){
      if (this.useType==='history'){
        this.getHistoryList()
      }else {
        this.getComputeCard()
      }
    },
    pointClick(index) {
      this.acPoint = index
      this.getInspectionRecordList()
    },
    calendarFn(e) {
      this.dateTxt = `${e.year}年${e.month}月${e.day}日`
      this.formDate = e.result
      this.getData()
    },
    setPubTitle(){
      if (this.useType==='history'){
        if (this.recordType==='巡逻'){
          this.pubTitle=`${this.parkNum}区巡更历史记录`
        }else {
          this.pubTitle=`${this.parkNum}区保洁历史记录`
        }

      }else {
        if (this.recordType==='巡逻'){
          this.pubTitle=`${this.parkNum}区巡更点位记录`
        }else {
          this.pubTitle=`${this.parkNum}区保洁点位记录`
        }
      }
    },
    getComputeCard(){
      let date = this.formDate
      this.apis.securityApi.computeCard({
        inspectionTime: date,
        parkNum: this.parkNum,
        recordType:this.recordType
      }).then(res => {
        let list=[]
        this.pointList=res.data
        if (!this.isEmpty(res.data)){
          let i=0
          for (let item in res.data){
            i+=1
            if (i>1)break;
            this.acPoint=item
          }

          this.getInspectionRecordList()
        }

      })
    },
    getInspectionRecordList() {
      let date = this.formDate
      this.apis.securityApi.inspectionRecordList({
        inspectionTime: date,
        qrCode:this.acPoint,
        parkNum: this.parkNum,
        recordType:this.recordType
      }).then(res => {
        let list = res.rows
        let sucCount = 0
        let errCount = 0
        list.forEach((item, index, arr) => {
          item.time = item.inspectionTime.split(" ")[1]
          if (item.state == '正常') {
            sucCount += 1
          } else {
            errCount += 1
          }
        })
        this.sucCount = sucCount
        this.errCount = errCount
        this.clockList = list
      })
    },
    getHistoryList(){
      let date=this.formDate
      this.apis.securityApi.inspectionRecordList({
        inspectionTime:date,
        parkNum:this.parkNum,
        recordType:this.recordType,
        state:this.state
      }).then(res=>{
        let list=res.rows
        let errCount=0
        list.forEach((item,index,arr)=>{
          item.time=item.inspectionTime.split(" ")[1]
          if (item.state!=='正常'&&item.state!=='合格'){
            errCount+=1
          }
        })
        this.allCount=list.length
        this.errCount=errCount
        this.clockList=list
      })
    },
    changeRecoSHow(num){
      this.clockList=[]
      if (num){
        let date=this.formDate
        this.state=this.recordType=='巡逻'?'异常':'不合格'
        this.apis.securityApi.inspectionRecordList({
          inspectionTime:date,
          parkNum:this.parkNum,
          recordType:this.recordType,
          state:this.state
        }).then(res=>{
          let list=res.rows
          let errCount=0
          list.forEach((item,index,arr)=>{
            item.time=item.inspectionTime.split(" ")[1]
            if (item.state!=='正常'){
              errCount+=1
            }
          })
          this.errCount=errCount
          this.clockList=list
        })
      }else {
        this.state=""
        this.getHistoryList()
      }

    }
  }
}
</script>

<style lang="scss">
.xg-count {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 160rpx;
  background: #FFFFFF;
  border-radius: 12rpx;
  display: flex;
  margin-bottom: 20rpx;
  margin-top: 40rpx;
  view {
    flex: 1;
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &:first-child::after {
      position: absolute;
      top: 50%;
      right: 0;
      content: "";
      width: 2rpx;
      height: 60rpx;
      transform: translateY(-50%);
      background: #EEEEEE;
    }

    text:nth-child(1) {
      margin-bottom: 10rpx;
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
      line-height: 42rpx;
    }

    text:nth-child(2) {
      font-size: 26rpx;
      font-weight: 500;
      color: #666666;
      line-height: 30rpx;
    }
  }
}

.xg-point {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 160rpx;
  background: #FFFFFF;
  border-radius: 12rpx;
  display: flex;
  margin-bottom: 20rpx;
  margin-top: 40rpx;

  view {
    flex: 1;
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &:first-child::after {
      position: absolute;
      top: 50%;
      right: 0;
      content: "";
      width: 2rpx;
      height: 60rpx;
      transform: translateY(-50%);
      background: #EEEEEE;
    }

    text:nth-child(1) {
      margin-bottom: 10rpx;
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
      line-height: 42rpx;
    }

    text:nth-child(2) {
      font-size: 26rpx;
      font-weight: 500;
      color: #666666;
      line-height: 30rpx;
    }
  }
}

.top-op {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 92rpx;
  z-index: 2;
  font-size: 32rpx;
  font-weight: bold;
  color: #FFFFFF;


  .ca-down {
    font-weight: 600;
    margin-top: 4rpx;
  }

  .top-op-item {
    border-radius: 200rpx;
    padding: 20rpx 30rpx;
    display: flex;
    align-items: center;
    border: 2rpx solid rgba(#FFFFFF, 0.5);
    margin-left: 38rpx;

    text {
      margin-left: 10rpx;
    }
  }
}


.top-calendar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 92rpx;
  z-index: 2;
  font-size: 32rpx;
  font-weight: bold;
  color: #FFFFFF;

  text {
    padding-right: 20rpx;
  }

  .ca-down {
    font-weight: 600;
    margin-top: 8rpx;
    margin-left: 8rpx;
  }


}

.hist-hisbox {
  position: relative;
  z-index: 2;
  border-radius: 12rpx;
  overflow: hidden;
}

.hist-hisitem {
  width: 100%;
  position: relative;
  z-index: 2;

  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(13rpx);
    width: 2rpx;
    height: 100%;
    background: #EEEEEE;
    z-index: 0;
  }

  .hist-hiscol {
    width: 100%;
    display: flex;

    .hist-hiscol-l {
      height: 100%;
      width: 26rpx;
      position: relative;

      .hist-hiscircle {
        position: absolute;
        top: 0;
        left: 0;
        width: 26rpx;
        height: 26rpx;
        background: #FFFFFF;
        opacity: 1;
        border: 4rpx solid #44D94B;
        border-radius: 50%;
        z-index: 1;
      }
    }
  }

  .hist-hiscol-r {
    margin-left: 20rpx;

    .hist-histime {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
      line-height: 33rpx;
    }

    .hist-hisc {
      margin: 20rpx 0;
      padding: 20rpx;
      display: flex;
      font-size: 26rpx;
      font-weight: 500;
      color: #666666;
      background: #f8f8f8;
      border-radius: 12rpx;

      view:nth-child(2) {
        margin: 0 20rpx;
        width: 310rpx;
        text-align: center;
        position: relative;
        border-left: 2rpx solid #eee;
        border-right: 2rpx solid #eee;
      }
    }

    .info {
      margin-bottom: 30rpx;
      width: 100%;
      border-radius: 12rpx;
      background: rgba(247, 77, 57, 0.03);
      padding: 20rpx;
      color: #F74D39;
    }
  }

  .err {
    height: 232rpx;
  }

}

.cbg {
  position: absolute;
	overflow-x: hidden;
  top: 100rpx;
  left: -3rpx;
  width: 100vw;
  z-index: 0;
  height: 400rpx;
  background: #17C25B;
  transform: scale(2.4);
  border-radius: 80%;
}

.ponit-scbox {
  position: relative;
  z-index: 2;
  width: 710rpx;
  height: 460rpx;
  background: #FFFFFF;
  border-radius: 12rpx;
  margin: 40rpx 0 20rpx;
  padding: 30rpx 0rpx;
  display: flex;
  flex-direction: column;

  .ponit-t {
    padding-left: 32rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    padding-bottom: 20rpx;
  }

  .ponit-c {
    width: 100%;
    height: 340rpx;
    display: flex;

    .ponit-c-b {
      padding-top: 12rpx;
      padding-left: 32rpx;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .ponit-col {
      margin: 0 20rpx 20rpx 0;
      box-sizing: border-box;
      width: 146rpx;
      height: 160rpx;
      background: #F9F9F9;
      border-radius: 12rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16rpx 0;
      position: relative;

      .count{
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-20%,-20%);
        background-color: #44D94B;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20rpx;
        color: #fff;
        font-size: 12px;
        height: 28rpx;
        padding: 0 8rpx;
        text-align: center;
        white-space: nowrap;

      }

			.errcount{
				position: absolute;
				top: 0;
				right: 0;
				transform: translate(20%,-20%);
				background-color: #f56c6c;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 20rpx;
				color: #fff;
				font-size: 12px;
				height: 28rpx;
				padding: 0 8rpx;
				text-align: center;
				white-space: nowrap;
			}

      &:nth-child(4n) {
        margin-right: 0;
      }

      .qrnum {
        font-size: 24rpx;
        font-weight: bold;
        color: #333333;
        line-height: 33rpx;
        margin-bottom: 12rpx;
      }


      .point-ic {
        width: 44rpx;
        height: 44rpx;
        margin-bottom: 10rpx;
      }

      .time {
        font-size: 24rpx;
        font-weight: bold;
        color: #999999;
        line-height: 28rpx;
      }

    }

    .ponit-col-ac {
      background: #44D94B;

      .qrnum, .time {
        color: #fff;
      }
    }

  }
}

.hist-box{
  position: relative;
  z-index: 2;
  border-radius: 12rpx;
  overflow: hidden;
}

.hist-item {
  width: 100%;
  position: relative;
  z-index: 2;

  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(13rpx);
    width: 2rpx;
    height: 100%;
    background: #EEEEEE;
    z-index: 0;
  }

  .hist-col {
    width: 100%;
    display: flex;

    .hist-col-l {
      height: 100%;
      width: 26rpx;
      position: relative;

      .hist-circle {
        position: absolute;
        top: 0;
        left: 0;
        width: 26rpx;
        height: 26rpx;
        background: #FFFFFF;
        opacity: 1;
        border: 4rpx solid #44D94B;
        border-radius: 50%;
        z-index: 1;
      }
    }
  }

  .hist-col-r {
    width: 100%;
    margin-left: 20rpx;

    .hist-time {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
      line-height: 33rpx;
    }

    .hist-c {
      margin: 20rpx 0;
      padding:20rpx;
      display: flex;
      font-size: 26rpx;
      font-weight: 500;
      color: #666666;
      width: 100%;
      background: #f8f8f8;
      border-radius: 12rpx;
      display: flex;
      flex-direction: column;

      view{
        flex-shrink: 0;
      }

      .hist-c-t,.hist-c-b{
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
      .hist-c-b{
        margin-top: 20rpx;
      }

    }

    .info{
      margin-bottom: 30rpx;
      width: 100%;
      border-radius: 12rpx;
      background: rgba(247, 77, 57, 0.03);
      padding: 20rpx;
      color: #F74D39;
    }
  }

  .err {
    height: 232rpx;
  }

}
</style>
